import styles from "./index.module.scss";
import "./index.scss";
import { useSelector } from "react-redux";
// import router from "@/router";
import ModelViewCenter from "./components/modelViewCenter";
import ModelView from "./components/modelView";
import ModelViewDef from "./components/modelViewDef";
import iconTj from "@/assets/public/icon-tj.png";
import iconTjLight from "@/assets/public/icon-tj-light.png";
import iconPc from "@/assets/public/icon-pc.png";
import iconPcLight from "@/assets/public/icon-pc-light.png";
import iconGxLight from "@/assets/public/icon-gx-light.png";
import iconYxLight from "@/assets/public/icon-yx-light.png";
import iconJlLight from "@/assets/public/icon-jl-light.png";
import iconJl from "@/assets/public/icon-jl.png";
import iconTsLight from "@/assets/public/icon-ts-light.png";
import iconTs from "@/assets/public/icon-ts.png";
import iconYx from "@/assets/public/icon-yx.png";
import iconGx from "@/assets/public/icon-gx.png";
import ResumeNote from "./components/resumeNote";
import General from "./components/general";
import Intention from "./components/intention";
import Supply from "./components/supply";
import Resource from "./components/resource";
import ResumePush from "./components/resumePush";


export default function Hire() {
  const theme = useSelector((state) => state.theme);
  return (
    <div className={styles.container}>
      <div className={styles.topBox}>
        <div className={styles.containerLeft}>
          <ModelView
            title="简历推荐"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconTjLight : iconTj}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={ResumeNote}
            height="285"
          ></ModelView>
        </div>
        <div className={styles.containerRight}>
          <ModelViewDef
            title="区域普查"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconPcLight : iconPc}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={General}
            height="285"
          ></ModelViewDef>
        </div>
      </div>
      <div className={styles.centerBox}>
        <div className={styles.centerBoxItem}>
          <ModelView
            title=" 招聘供需"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconGxLight : iconGx}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={Supply}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.centerBoxThan}>
          <ModelViewDef
            title="区域意向人员"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconYxLight : iconYx}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={Intention}
            height="269"
          ></ModelViewDef>
        </div>
      </div>
      <div className={styles.bottomBox}>
        <div className={styles.bottomBoxLeft}>
          <ModelViewCenter
            title="资源池简历上传"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconJlLight : iconJl}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={Resource}
            height="269"
          ></ModelViewCenter>
        </div>
        <div className={styles.bottomBoxRight}>
          <ModelViewCenter
            title="区域简历推送"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconTsLight : iconTs}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={ResumePush}
            height="269"
          ></ModelViewCenter>
        </div>
      </div>
    </div>
  );
}
